<template>
	<view class="body">
		<view class="wrap">
			<view class="content">
				<u-form :model="form" ref="uForm">
					<view class="title">用户注册</view>
					<u-form-item prop="username" class="input">
						<u-input v-model="form.username" type="text" placeholder="请输入用户名" />
					</u-form-item>
					<u-form-item prop="password" class="input">
						<u-input v-model="form.password" type="password" placeholder="请输入密码" />
					</u-form-item>
					<u-form-item prop="pwd2" class="input">
						<u-input v-model="form.pwd2" type="password" placeholder="请再次输入密码" />
					</u-form-item>
					<u-form-item prop="captcha">
						<uni-captcha :scene="form.scene" v-model="form.captcha"></uni-captcha>
					</u-form-item>
					<button @tap="register" :style="[inputStyle]" class="login-btn">立即注册</button>
					<view class="register-text" @tap="toLogin">已有账号，立即登录</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					pwd2: '',
					scene: 'register',
					captcha: ''
				},
				_id: ''
			}
		},
		onLoad() {

		},
		onUnload() {
			this.init();
		},
		computed: {
			inputStyle() {
				let style = {
					color: "#fff",
					backgroundColor: this.$u.color['warning']
				};
				if (this.form.username && this.form.password && this.form.pwd2) {
					style.backgroundColor = "#00b4b3";
				}
				return style;
			}
		},
		methods: {
			async register() {
				if (!this.form.username) {
					this.$u.toast('请输入用户名')
					return
				}

				if (!this.form.password) {
					this.$u.toast('请输入密码')
					return
				}

				if (!this.form.pwd2) {
					this.$u.toast('请再次输入密码')
					return
				}

				if (this.form.password !== this.form.pwd2) {
					this.$u.toast('两次输入的密码不一致')
					return
				}

				uni.showToast({
					title: '注册中....',
					icon: 'none'
				});

				let res = await uniCloud.callFunction({
					name: 'uni-id-cf',
					data: {
						action: 'register',
						params: this.form,
					}
				})
				if (res.result.code === 0) {
					this.$u.toast('注册成功');

					this.$api.get_user({
						name: 'get_user'
					}).then((res) => {
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].username == this.form.username) {
								this._id = res.data[i]._id
								console.log(this._id)
								break;
							}
						}
					})
					this.$u.route('/pages/login/login');
				} else {
					this.$u.toast(res.result.msg);
				}
			},
			toLogin() {
				this.$u.route('/pages/login/login');
			},
			init() {
				// 初始话数据
				this.$api.update_user({
					name: 'update_user',
					_id: this._id,
					cover: 'https://img.bosszhipin.com/boss/avatar/avatar_16.png',
					sex: '男',
					age: '18',
					edu: '本科',
					school: '泉州师范学院'
				}).then((res) => {
					console.log(res)
					uni.showToast({
						title: '请登录',
						icon: 'none'
					});
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.body {
		background: $boss-base-color;
		height: 100vh;
		width: 100vw;
		padding-top: 140rpx;

		.wrap {
			font-size: 28rpx;

			.content {
				background: white;
				width: 60%;
				padding: 40rpx;
				margin: 80rpx auto 0;
				border-radius: 40rpx;

				.title {
					text-align: left;
					font-size: 60rpx;
					font-weight: 500;
					text-align: center;
					margin-bottom: 100rpx;
				}

				.input {
					text-align: left;
					margin-bottom: 10rpx;
					padding-bottom: 6rpx;
					border: 1px solid gray;
					border-radius: 20rpx;
					margin-bottom: 40rpx;
				}

				.login-btn {
					margin-top: 40rpx;
					background-color: rgb(253, 243, 208);
					color: #FFFFFF;
					;
					border: none;
					font-size: 30rpx;
					padding: 12rpx 0;

					&::after {
						border: none;
					}
				}

				.register-text {
					padding: 20rpx 0;
					text-align: right;
					color: $boss-base-color;
				}
			}
		}
	}
</style>